<template>
  <el-card>
    <div class="top-search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="交易机构">
          <el-input v-model="formInline.user" placeholder="请输入交易机构" />
        </el-form-item>
        <el-form-item label="矿产品类型">
          <el-input v-model="formInline.user" placeholder="请输入矿产品类型" />
        </el-form-item>
        <el-form-item label="公告类型">
          <el-input v-model="formInline.user" placeholder="请输入公告类型" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
  <el-card>
    <div class="btn-list">
      <el-button type="primary" @click="cliAdd">新增</el-button>
    </div>
    <el-table
      :data="tableData.list"
      stripe
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        type="index"
        width="80"
        label="序号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="mechanismExchange"
        label="交易机构"
        align="center"
      />
      <el-table-column
        prop="miningType"
        label="矿业权类型"
        width="180"
        align="center"
      />
      <el-table-column
        prop="noticeType"
        label="公告类型"
        width="180"
        align="center"
      />

      <el-table-column label="操作" align="center" width="250">
        <template #default="scope">
          <div class="btn">
            <el-button type="primary" @click="cliSelect(scope.row.id)"
              >录入</el-button
            >
            <el-button type="warning" @click="cliUpl(scope.row)"
              >修改</el-button
            >
            <el-button type="danger" @click="cliDelete(scope.row.id)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <!-- <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      /> -->
      <!-- 分页 -->
      <Paging
        :total="total"
        :currentPage.sync="currentPage"
        :pageSize.sync="pageSize"
        @pagination="handlePageChange"
      ></Paging>
    </div>
  </el-card>
  <!-- 新增 -->
  <el-dialog
    v-model="dialogVisible"
    title="新增发布公告"
    width="50%"
    :before-close="handleClose"
  >
    <div>
      <el-form :model="form" label-width="120px">
        <el-form-item label="矿业权类型">
          <el-select
            v-model="form.miningType"
            class="m-2"
            placeholder="请选择矿业权类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="公告类型">
          <el-radio-group v-model="form.noticeType">
            <el-radio-button label="挂牌公告" />
            <el-radio-button label="拍卖公告" />
            <el-radio-button label="补充公告" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="交易机构 ">
          <el-select
            v-model="form.mechanismExchange"
            placeholder="请选择"
            style="width: 100%"
            filterable
          >
            <el-option
              v-for="item in optionsAddress"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOK"> 确 认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
import type { TabsPaneContext } from "element-plus";
// 引入自定义请求库
import { postAction } from "@/utils/system/commonUse";
// 引入分页
import Paging from "@/components/basePage/packagePaging/index.vue";
const router = useRouter();
const activeName = ref("first");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
// 数据
let tableData = reactive({ list: [] });
onMounted(() => {
  getList();
});

const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};

const cliUpl = (row: any) => {
  console.log(row);
};

const cliAdd = () => {
  dialogVisible.value = true;
};

// 新增模态框
const dialogVisible = ref(false);

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

const form = reactive({
  miningType: "采矿权",
  noticeType: "挂牌公告",
  mechanismExchange: "省本级",
});
// 后端地址
const url = reactive({
  addUrl: "/message/saveOrUpdate",
  getListUrl: "/message/queryDataByPage",
  deleteUrl: "/message/delete",
});
// 条数
const total = ref(0);
// 长度
const pageSize = ref(10);
// 页码
const currentPage = ref(1);
// 分页器
const handlePageChange = (data: any) => {
  console.log("handlePageChange", data);

  currentPage.value = data.currentPage;
  pageSize.value = data.pageSize;
  getList();
};
// 单击删除
const cliDelete = (id: string) => {
  postAction(`${url.deleteUrl}/${id}`)
    .then((data: any) => {
      if (data.code != 1000) {
        return ElMessage.error(data.msg);
      }
      ElMessage({
        message: data.msg,
        type: "success",
      });
      getList();
    })
    .catch((err) => {
      ElMessage.error("删除失败");
    });
};
const getList = () => {
  postAction(url.getListUrl, { size: pageSize.value, mount: currentPage.value })
    .then((data: any) => {
      console.log("表格数据", data);

      if (data.code != 1000) {
        return ElMessage.error(data.msg);
      }

      total.value = data.data.count;
      tableData.list = data.data.data;
    })
    .catch((err) => {
      console.log(err);

      ElMessage.error("表格数据获取失败");
    });
};
type resultOK = {
  data: any;
  msg: string;
  code: number | string;
  sign: number | string;
};
// 确认提交
const addOK = () => {
  postAction(url.addUrl, form)
    .then((data: any) => {
      if (data.code != 1000) {
        return ElMessage.error(data.msg);
      }
      ElMessage({
        message: data.msg,
        type: "success",
      });
      dialogVisible.value = false;
    })
    .catch((err) => {
      ElMessage.error("添加失败");
    });
};
const options = [
  {
    value: "采矿权",
    label: "采矿权",
  },
  {
    value: "探矿权",
    label: "探矿权",
  },
];
// 交易机构
const optionsAddress = [
  {
    value: "省本级",
    label: "省本级",
  },
  {
    value: "杭州市",
    label: "杭州市",
  },
  {
    value: "宁波市",
    label: "宁波市",
  },
  {
    value: "温州市",
    label: "温州市",
  },
  {
    value: "湖州市",
    label: "湖州市",
  },
  {
    value: "绍兴市",
    label: "绍兴市",
  },
  {
    value: "金华市",
    label: "金华市",
  },
  {
    value: "衢州市",
    label: "衢州市",
  },
  {
    value: "舟山市",
    label: "舟山市",
  },
  {
    value: "台州市",
    label: "台州市",
  },
  {
    value: "丽水市",
    label: "丽水市",
  },
  {
    value: "义乌市",
    label: "义乌市",
  },
];

// 分页
const currentPage4 = ref(4);
const pageSize4 = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
const formInline = reactive({
  radio1: "采矿权",
  radio2: "挂牌公告",
  user: "",
  region: "",
});

const onSubmit = () => {
  console.log("submit!");
};

const cliSelect = (strId: string) => {
  // router.push(`/projectManage/projectDetail`);
  // router.push({
  //   path: `/projectManage/projectDetail?q=${strId}`,
  // });
  console.log("strId", strId);

  router.push({
    name: "projectDetail",
    params: { id: strId },
  });
};
</script>

<style lang="scss" scoped>
.el-card {
  margin: 15px;
}
.top-search {
  display: flex;
}
.btn-list {
  display: flex;
  margin: 10px 0;
}
.pagination {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  .el-button {
    margin-right: 5px;
  }
  // justify-content: space-around;
}
.demo-tabs {
  width: 100%;
}
</style>
